<template>
  <div class="page-content">
    <div class="header">
      <h3>新增脚本模板</h3>
    </div>

    <el-form label-width="295px" style="margin-top: 20px">
      <el-form-item label="脚本名称">
        <el-input v-model="dataInfo.jiaoben_name" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item label="初始化人数">
        <el-input-number v-model="dataInfo.number_start" :disabled="!isEdit" :min="0" />
      </el-form-item>

      <el-form-item label="最终人数">
        <el-input-number v-model="dataInfo.number_end" :disabled="!isEdit" :min="0" />
      </el-form-item>

      <el-form-item label="群简介">
        <el-input
          type="textarea"
          v-model="dataInfo.qun_introduction"
          :disabled="!isEdit"
          :autosize="{ minRows: 3, maxRows: 6 }"
          placeholder="请输入群简介"
        />
      </el-form-item>

      <el-form-item label="群头像">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :disabled="!isEdit"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeLogoUpload"
        >
          <img v-if="dataInfo.avatar" :src="dataInfo.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <el-form-item label="禁言时间段设置">
        <el-time-picker
          v-model="dataInfo.mute_time_setting_array"
          is-range
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :disabled="!isEdit"
          format="HH:mm"
          value-format="HH:mm"
          style="width: 300px"
        />
      </el-form-item>

      <el-form-item label="入群欢迎词">
        <el-input
          type="textarea"
          v-model="dataInfo.welcome_message"
          :disabled="!isEdit"
          :autosize="{ minRows: 3, maxRows: 6 }"
          placeholder="请输入入群欢迎词"
        />
      </el-form-item>

      <el-form-item label="入群欢迎词发帖人昵称">
        <el-input v-model="dataInfo.welcome_user_nickname" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item label="入群欢迎词发帖人昵称头像">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :disabled="!isEdit"
          :on-success="handle_welcome_user_avatar_Success"
          :before-upload="beforeLogoUpload"
        >
          <img v-if="dataInfo.welcome_user_avatar" :src="dataInfo.welcome_user_avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <el-form-item label="是否发布巡航广告">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="dataInfo.is_send_ad"
          active-text="开启"
          inactive-text="关闭"
          :disabled="!isEdit"
        />
      </el-form-item>

      <el-form-item label="项目巡航广告">
        <el-input v-model="dataInfo.ad_content" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item label="项目巡航广告执行间隔（分钟）">
        <el-input-number
          v-model="dataInfo.ad_frequency"
          :min="1"
          :disabled="!isEdit"
          controls-position="right"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="项目巡航广告发帖人昵称">
        <el-input v-model="dataInfo.ad_user_nickname" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item label="项目巡航广告发帖人昵称头像">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :disabled="!isEdit"
          :on-success="handle_ad_user_avatar_Success"
          :before-upload="beforeLogoUpload"
        >
          <img v-if="dataInfo.ad_user_avatar" :src="dataInfo.ad_user_avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <el-form-item label="群成员昵称 默认 城市+昵称 / 昵称">
        <el-switch
          active-value="cityandnick"
          inactive-value="nickname"
          v-model="dataInfo.robot_nick_type"
          active-text="城市+昵称"
          inactive-text="只有昵称"
          :disabled="!isEdit"
        />
      </el-form-item>

      <el-form-item label="机器人：角色标签">
        <TagInput v-model="dataInfo.robot_tag_role_array" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item label="机器人：职业标签">
        <TagInput v-model="dataInfo.robot_tag_post_array" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item label="机器人：专业度标签(新手/老手)">
        <TagInput v-model="dataInfo.robot_tag_professionalism_array" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item label="机器人：年龄标签">
        <TagInput v-model="dataInfo.robot_tag_age_array" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item label="机器人：活跃度">
        <TagInput v-model="dataInfo.robot_tag_character_array" :disabled="!isEdit" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="width: 90px" @click="edit">
          {{ isEdit ? '保存' : '编辑' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createNewJiaoBenApi } from "@/api/ImChat";
import { getGroupId } from "@/utils/auth";
import { baseUrl, webImageUrl } from "@/utils/config.js";
import TagInput from "@/components/common/TagInput.vue";

export default {
  components: { TagInput },
  data() {
    return {
      dataInfo: {
        avatar: '',
        welcome_user_avatar: '',
        ad_user_avatar: '',
        mute_time_setting_array: ['', ''],
        ad_frequency: 10,
        robot_tag_role_array: [],
        robot_tag_post_array: [],
        robot_tag_age_array: [],
        robot_tag_professionalism_array: [],
        robot_tag_character_array: [],
      },
      isEdit: true,
      uploadUrl: baseUrl + '/upload/image',
    };
  },
  methods: {
    handleAvatarSuccess(res) {
      this.dataInfo.avatar = webImageUrl + res.data[0];
    },
    handle_welcome_user_avatar_Success(res) {
      this.dataInfo.welcome_user_avatar = webImageUrl + res.data[0];
    },
    handle_ad_user_avatar_Success(res) {
      this.dataInfo.ad_user_avatar = webImageUrl + res.data[0];
    },
    beforeLogoUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) this.$message.error('只能上传图片格式!');
      if (!isLt2M) this.$message.error('图片大小不能超过 2MB!');
      return isImage && isLt2M;
    },
    edit() {
      if (!this.isEdit) {
        this.isEdit = true;
        return;
      }

      const [start, end] = this.dataInfo.mute_time_setting_array;
      const muteSetting = `${start}-${end}`;

      this.dataInfo.mute_time_setting = muteSetting
      this.dataInfo.robot_tag_role = JSON.stringify(this.dataInfo.robot_tag_role_array);
      this.dataInfo.robot_tag_post = JSON.stringify(this.dataInfo.robot_tag_post_array);
      this.dataInfo.robot_tag_professionalism = JSON.stringify(this.dataInfo.robot_tag_professionalism_array);
      this.dataInfo.robot_tag_age = JSON.stringify(this.dataInfo.robot_tag_age_array);
      this.dataInfo.robot_tag_character = JSON.stringify(this.dataInfo.robot_tag_character_array);

      const postData = { ...this.dataInfo, groupid: getGroupId(), };
      // 保存逻辑待补充

      createNewJiaoBenApi(postData).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功');
          this.isEdit = false;
        } else {
          this.$message.error(res.msg || '保存失败');
        }
      }).catch(() => {
        this.$message.error('请求失败，请检查网络或稍后再试');
      });

    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .header {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;

    h3 {
      font-size: 17px;
      font-weight: 500;
    }
  }

  /deep/ .el-form {
    .el-form-item {
      max-width: 700px;
    }
  }
}

.avatar-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  .el-icon-plus {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }
}
</style>